<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据采集控制面板 - 滇西科技师范学院课程表管理系统</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Bootstrap Icons - 本地文件 -->
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <style>
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .card {
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .progress {
            height: 8px;
        }
        
        .status-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .control-card {
            border: 2px solid #e9ecef;
        }
        
        .control-card.active {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-calendar-check"></i>
                滇西科技师范学院课程表管理系统
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="/">
                    <i class="bi bi-house"></i> 返回首页
                </a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="text-center text-primary">
                    <i class="bi bi-download"></i>
                    数据采集控制面板
                </h2>
                <p class="text-center text-muted">配置采集参数，启动数据采集任务</p>
            </div>
        </div>

        <!-- Cookies输入区域 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-key"></i>
                            Cookies 配置（必填）
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="cookiesInput" class="form-label">请输入从浏览器获取的Cookies</label>
                            <textarea class="form-control" id="cookiesInput" rows="3" 
                                placeholder="请从浏览器开发者工具中复制完整的Cookie字符串..."></textarea>
                            <div class="form-text">
                                <i class="bi bi-info-circle"></i>
                                请先登录教务系统，然后从浏览器开发者工具(F12) → Network → 任意请求 → Request Headers → Cookie 中复制
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 采集控制卡片 -->
        <div class="row">
            <!-- 班级采集控制卡片 -->
            <div class="col-lg-6 mb-4">
                <div class="card control-card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-people"></i>
                            班级课表采集
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="classYearInput" class="form-label">年级（可选）</label>
                                <input type="text" class="form-control" id="classYearInput" 
                                    placeholder="留空采集所有年级" title="留空则采集所有年级">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="classSemesterInput" class="form-label">学年学期（可选）</label>
                                <input type="text" class="form-control" id="classSemesterInput" 
                                    placeholder="如：2025-2026-1" title="留空使用默认学期">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="classCollegeInput" class="form-label">院系代码（可选）</label>
                                <input type="text" class="form-control" id="classCollegeInput" 
                                    placeholder="留空采集所有学院" title="留空则采集所有学院，4014=信息学院">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="classMajorInput" class="form-label">专业代码（可选）</label>
                                <input type="text" class="form-control" id="classMajorInput" 
                                    placeholder="留空采集所有专业" title="留空则采集所有专业">
                            </div>
                        </div>
                        <div class="d-grid">
                            <button class="btn btn-primary btn-lg" id="scrapeClassBtn">
                                <i class="bi bi-download"></i>
                                开始采集班级课表
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 教师采集控制卡片 -->
            <div class="col-lg-6 mb-4">
                <div class="card control-card h-100">
                    <div class="card-header bg-info text-white">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-person-badge"></i>
                            教师课表采集
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="teacherNameInput" class="form-label">教师姓名（可选）</label>
                                <input type="text" class="form-control" id="teacherNameInput" 
                                    placeholder="留空采集所有教师" title="支持模糊匹配">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="teacherIdInput" class="form-label">教师工号（可选）</label>
                                <input type="text" class="form-control" id="teacherIdInput" 
                                    placeholder="留空采集所有教师" title="精确匹配教师工号">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="teacherSemesterInput" class="form-label">学年学期（可选）</label>
                                <input type="text" class="form-control" id="teacherSemesterInput" 
                                    placeholder="如：2025-2026-1" title="留空使用默认学期">
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-text mt-4">
                                    <i class="bi bi-info-circle"></i>
                                    教师采集将获取全校所有教师的课表数据
                                </div>
                            </div>
                        </div>
                        <div class="d-grid">
                            <button class="btn btn-info btn-lg" id="scrapeTeacherBtn">
                                <i class="bi bi-download"></i>
                                开始采集教师课表
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 采集状态显示区域 -->
        <div class="row" id="scrapingStatus" style="display: none;">
            <div class="col-12">
                <div class="card status-card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-activity"></i>
                            采集状态
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- 班级采集状态 -->
                            <div class="col-md-6">
                                <h6 class="text-white-50">班级课表采集</h6>
                                <div class="mb-2">
                                    <span class="badge bg-light text-dark" id="classStatus">待机中</span>
                                    <span class="ms-2" id="classMessage">-</span>
                                </div>
                                <div class="progress mb-3">
                                    <div class="progress-bar" id="classProgress" style="width: 0%"></div>
                                </div>
                            </div>
                            <!-- 教师采集状态 -->
                            <div class="col-md-6">
                                <h6 class="text-white-50">教师课表采集</h6>
                                <div class="mb-2">
                                    <span class="badge bg-light text-dark" id="teacherStatus">待机中</span>
                                    <span class="ms-2" id="teacherMessage">-</span>
                                </div>
                                <div class="progress mb-3">
                                    <div class="progress-bar bg-info" id="teacherProgress" style="width: 0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 消息提示区域 -->
        <div id="messageArea"></div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p class="mb-2 text-muted">
                        🏫 滇西科技师范学院 → 信息学院 | 
                        👤 <strong>张绕坤</strong> | 
                        ✉️ <a href="mailto:2986517697@qq.com" class="text-decoration-none">2986517697@qq.com</a> | 
                        📱 15391430821
                    </p>
                    <p class="mb-0 text-muted small">
                        💡 功能点反馈，有建议欢迎找我！欢迎提出宝贵意见和建议，一起完善这个系统！
                    </p>
                    <p class="mt-2 mb-0 text-muted small">
                        💻 让我们一起打造更好的课程表管理系统！
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/scrape_control.js') }}?v=20250924"></script>
</body>
</html>
